﻿<!DOCTYPE html>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="UTF-8" />
    <title>Get Aperture ObjID</title>
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
</head>
<body>
    <h3>Test</h3>

    <input id="btnCrap" type="button" onclick="addClickEvents();" value="Remove garbage and add click event for ROOM layer" /><br />


    <!-- SVG: See
        Projects\SvgConverter\ApertureService\0001_GB01_OG14_0000_Aperture.dxf
        for conversion source file
    -->
    

    <object id="sv" data="0001_GB01_OG14_0000_Aperture.svg" type="image/svg+xml">
        <!-- <img src="yourfallback.jpg" alt="SVG fallback image" /> -->
    </object>

    <script type="text/javascript">


        function getBoundingBoxCenter(el)
        {
            // Returns coordinates in screen-space
            var bbox = el.getBoundingClientRect();

            
            var S = document.getElementById("sv")
            var SD = S.getSVGDocument();
            /*
            //var  ctm = document.getElementById("object_7").getCTM()
            var ctm = el.getCTM();
            // console.log(ctm);

            var pt = SD.rootElement.createSVGPoint();

            
            pt.x = bbox.left + bbox.width / 2,
            pt.y = bbox.top + bbox.height / 2
            pt = pt.matrixTransform(ctm);
             var center = {
                 x: pt.x
                ,y: pt.y
            };
            */

            var center = {
                x: bbox.left + bbox.width / 2,
                y: bbox.top + bbox.height / 2
            };



            var pt = SD.rootElement.createSVGPoint();
            pt.x = center.x;
            pt.y = center.y;

            var ctm = SD.rootElement.getScreenCTM();
            var inverse = ctm.inverse();
            var p = pt.matrixTransform(inverse);
            center.x = p.x;
            center.y = p.y;
            
            return center;
        }


        function ScreenToSvg(center)
        {
            var S = document.getElementById("sv")
            var SD = S.getSVGDocument();

            var pt = SD.rootElement.createSVGPoint();
            pt.x = center.width;
            pt.y = center.height;

            var ctm = SD.rootElement.getScreenCTM();
            var inverse = ctm.inverse();
            var p = pt.matrixTransform(inverse);
            
            var dimensions = {
                 width: p.x
                ,height: p.y
            };

            return dimensions;
        }


        function showClickCoords(e)
        {
            var cursorX = e.clientX;
            var cursorY = e.clientY;
            console.log("X: " + cursorX + " Y: " + cursorY);
        }


        function showEntity(e)
        {
            console.log("showEntity");
            var node = e.target;
            console.log(node);
            console.log(getBoundingBoxCenter(node));
        }


        function createCircle(bbc)
        {
            var svgns = "http://www.w3.org/2000/svg";
            var S = document.getElementById("sv")
            var SD = S.getSVGDocument();

            var shape = SD.createElementNS(svgns, "circle");
            shape.setAttributeNS(null, "cx", bbc.x);
            shape.setAttributeNS(null, "cy", bbc.y);
            shape.setAttributeNS(null, "r", 10);
            shape.setAttributeNS(null, "fill", "red");

            // stroke="black" stroke-width="0"

            SD.rootElement.appendChild(shape);
        }


        function ser()
        {
            var S = document.getElementById("sv")
            var markup = (new XMLSerializer()).serializeToString(S.contentDocument.rootElement);
            // console.log(markup);
        }


        function addClickEvents()
        {
            var S = document.getElementById("sv")
            // console.log(S);

            var SD = S.getSVGDocument();
            // console.log(SD);

            var layers = SD.rootElement.getElementsByTagName("g");

            // Remove all layers except layer "FM_OBJEKT_RAUM"
            for (var i = layers.length -1; i > -1; --i)
            {
                //console.log(layers[i].id);

                if ("FM_OBJEKT_RAUM" != layers[i].id)
                {
                    /*
                    while (layers[i].firstChild)
                    {
                        layers[i].removeChild(layers[i].firstChild);
                    }
                    */

                    layers[i].parentNode.removeChild(layers[i]);
                }

            }

            // Doesn't get the entity
            SD.addEventListener('click', showClickCoords);

            var el = SD.getElementById("FM_OBJEKT_RAUM");
            var paths = el.getElementsByTagName("path")

            var midpoints = [];

            

            for (var i = 0; i < paths.length; ++i)
            {
                // console.log(paths[i]);
                paths[i].addEventListener('click', showEntity);

                midpoints.push(getBoundingBoxCenter(paths[i]));

                console.log(getBoundingBoxCenter(paths[i]));


                createCircle(getBoundingBoxCenter(paths[i]));
            }
            
            // console.log(midpoints);


            // console.log(SD.rootElement.getBoundingClientRect());
            console.log(ScreenToSvg(SD.rootElement.getBoundingClientRect()));
            
            

        }

        // addClickEvents(); // Wrong, must wait until SVG load-complete, not doc.ready
        // Press button #btnCrap instead

    </script>

</body>
</html>
